<template>
  <div class="birthday-page">
    <div class="container">
      <div class="happy-birthday__text">
        <el-image
          style="width: 100%; height: 100%;"
          src="https://obs-user-test.obs.cn-east-3.myhuaweicloud.com:443/test_1705457493_7uelzBlMhU.png"
        />
        <!--        <svg-icon icon-class="happy_birthday" class-name="icon-text" />-->
      </div>
      <div class="happy_birthday__border">
        <svg-icon icon-class="happy_birthday_border" class-name="icon" />
        <div class="name__container">
          <span
            v-for="(item, index) in list"
            :key="index"
            class="name"
            :style="{
              'font-size': calculateFontSize
            }"
          >
            {{ item }}
          </span>
        </div>

      </div>
      <FireworkAnimation
        class="firework-animation firework-animation--left"
      />

      <FireworkAnimation
        class="firework-animation firework-animation--right"
      />
    </div>

  </div>
</template>
<script>
import FireworkAnimation from '@/views/birthdayPage/components/FireworkAnimation.vue'
import { getBirthdayUsers } from '@/api/birth'
export default {
  name: '',
  components: {
    FireworkAnimation
  },
  data() {
    return {
      backgroundImage: 'https://obs-user-test.obs.cn-east-3.myhuaweicloud.com:443/test_1705365142_8BO4yzlUDC.png',
      users: [],
      num: 2,
      page: {
        page: 1,
        pageSize: 20
      },
      timer: null
    }
  },
  computed: {
    list() {
      const start = (this.page.page - 1) * this.page.pageSize
      const end = start + this.page.pageSize
      return this.users.slice(start, Math.min(end, this.users.length))
    },

    total() {
      return this.users.length
    },

    totalPage() {
      const { pageSize } = this.page
      return Math.ceil(this.total / pageSize)
    },

    hasNextPage() {
      const { page } = this.page
      return page < this.totalPage
    },

    calculateFontSize() {
      const section = {
        large: {
          fontSize: '3vw',
          len: 5
        },

        big: {
          fontSize: '2.8vw',
          len: 10
        },

        medium: {
          fontSize: '2.6vw',
          len: 15
        },

        small: {
          fontSize: '2.05vw',
          len: 20
        }
      }
      const len = this.list.length
      const calc = (len) => {
        // 找到对应长度区间的字体大小
        for (const key in section) {
          if (len <= section[key].len) {
            return section[key].fontSize
          }
        }

        // 如果超过最大长度，返回最小字体大小
        return section.small.fontSize
      }

      return calc(len)
    }
  },
  created() {
    this.getBirthdayUsers()
  },
  methods: {
    startAutoScroll(delay = 10 * 1000) {
      if (!this.total || this.total < this.page.pageSize) return
      this.stopAutoScroll()
      this.timer = setInterval(() => {
        this.nextPage()
      }, delay)
    },

    stopAutoScroll() {
      if (typeof this.timer !== 'number' || isNaN(this.timer)) return
      clearInterval(this.timer)
    },

    nextPage() {
      if (!this.hasNextPage) {
        this.page.page = 1
        return
      }

      this.page.page++
    },

    async getBirthdayUsers() {
      try {
        const res = await getBirthdayUsers()
        console.log('res --------->', res)
        this.users = res.data
        this.startAutoScroll()
      } catch (error) {
        this.$message.error(error?.response?.data?.message || '信息获取失败')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
* {
  font-family: "SimHei";
}
.container {
  position: relative;
  height: 100vh;
  background-image: url("https://obs-user-test.obs.cn-east-3.myhuaweicloud.com:443/test_1705365142_8BO4yzlUDC.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .happy-birthday__text {
    width: 50vw;
    //height: 200px;
    .icon-text {
      width: 50vw;
      height: 20vh;
    }
  }

  .happy_birthday__border {
    width: 50vw;
    height: 50vh;
    position: relative;
    //background-image: url("https://obs-user-test.obs.cn-east-3.myhuaweicloud.com:443/test_1705373507_litxOkwmRP.svg");
    //background-size: 900px 450px;
    //background-repeat: no-repeat;
    //background-position: center;
    //z-index: 1;
    .icon {
      width: 55vw;
      height: 55vh;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 0;
    }
    .name__container {
      position: absolute;
      width: 100%;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -40%);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      .name {
        color: #C65347;
        width: calc(100% / 4);
        font-size: 2.05vw;
        //font-weight: 700;
        margin: 0.6vw 0;
        text-align: center;
      }
    }
  }

  .firework-animation {
    position: absolute;
    bottom: 0;
    width: 50%;
    height: 100%;
    z-index: 0;
    &--left {
      left: 0;
    }

    &--right {
      right: 0;
    }
  }
}
.test {
  display: flex;
  justify-content: center;
  align-items: center;
  > div {
    flex: 1;
    text-align: center;
  }
}
</style>
